layui.use(['layer'], function () {
    var layer = layui.layer;
    //todo 这边写ajax获取后端的数据，暂时用json格式字符串模拟
    $('#cate').hide();
    //绑定点击事件
    $('#cate_click').on('click', function () {
        $('#main_content').hide();
        $('#cate').show();
    });

    $('#close').on('click', function () {
        $('#cate').hide();
        $('#main_content').show();
    });

    var url = "http://120.26.76.247/";
    //进入首页接口
    $.ajax({
        url: url + "api/getSurpriseShopList",
        type: "get",
        datatype: "json",
        success: function (api_data) {
            var result = JSON.parse(api_data);
            var data = result.data;
            for (var i = 0; i < data.length; i++) {
                var goods_item = $('<div class="goods-item jx"></div>'),
                    heard_row = $('<div class="layui-row"></div>'),
                    heard_div = $('<div class="layui-col-xs12"></div>'),


                    heard_img = $('<a href="/workspace/EnterTheStore.html?id=' + data[i].id + '"><img src=" ' + data[i].gatepic + '" height="100%" width="100%" /></a>');

                var middle_div = $('<div class="layui-row  cj" data-api="' + data[i]['id'] + '"></div>'),
                    middle_logo = $('<div class="layui-col-xs4"></div>');
                var logo_1 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + data[i].logopic + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                var logo_ = "";
                if (data[i]['type'] == 0) {
                    //淘宝
                    logo_ = "img/31_155_bl.jpg";
                } else if (data[i]['type'] == 1) {
                    //微信
                    logo_ = "img/timg_1.jpg";
                }
                var logo_2 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + logo_ + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                var middle_right = $('<div class="layui-col-xs8 zhongbu"></div>'),
                    middle_content = $('<div class="layui-container"></div>'),
                    pingjia = $('<div class="layui-row layui-col-space1"></div>'),
                    leiji_pingjia = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                        '<div>累计评价</div><label class="num">' + data[i].evaluatecount + '</label></div></div></div></div>'),
                    yuexiao = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                        '<div>月销指数</div><label class="num">' + data[i].salecount + '</label></div></div></div></div>'),
                    guang = $('<div class="layui-row"></div>'),

                    fensi = $('<div class="layui-col-xs5"><button class="layui-btn layui-btn-xs layui-btn-warm  btn3">粉丝<label>' + data[i].likecount + '</label></button></div>'),
                    xihuan = $('<div class="layui-col-xs3 layui-col-xs-offset1"><button class="layui-btn layui-btn-xs layui-btn-danger btn2">我喜欢</button></div>'),
                    quguanguang = $('<div class="layui-col-xs3"><button class="layui-btn layui-btn-xs layui-btn-warm  btn1"><a href="/workspace/EnterTheStore.html?id=' + data[i].id + '">去逛逛</a></button></div>');

                var shishang_1 = $('<div class="layui-row"></div>'),
                    shishang = $('<div class="layui-col-xs12"><div class="text1">' + data[i].introduce + '</div></div>');
                shishang_1.append(shishang);
                middle_logo.append(logo_1).append(logo_2);
                middle_right.append(middle_content.append(pingjia.append(leiji_pingjia).append(yuexiao).append(guang.append(fensi).append(quguanguang).append(xihuan))));
                middle_div.append(middle_logo).append(middle_right);
                goods_item.append(heard_row.append(heard_div.append(heard_img))).append(middle_div).append(shishang_1);

                $("#content_goods").append(goods_item);
            }
        }
    });
    //分类选项接口
    $.ajax({
        url: url + "api/getSurpriseCategoryList",
        type: "get",
        datatype: "json",
        success: function (category) {
            var final_td = "";
            // var category = '{"data":[{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":1,"name":"运动","updatetime":{"date":21,"day":5,"hours":15,"minutes":46,"month":8,"seconds":32,"time":1537515992000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":2,"name":"男士","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":3,"name":"女士","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":4,"name":"数码","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":5,"name":"家居","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":6,"name":"创意","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":7,"name":"精品","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":8,"name":"美颜","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":9,"name":"饰品","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":10,"name":"巧克力","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}},{"addtime":{"date":3,"day":6,"hours":0,"minutes":0,"month":0,"seconds":0,"time":144000000,"timezoneOffset":-480,"year":70},"id":11,"name":"家庭","updatetime":{"date":21,"day":5,"hours":15,"minutes":40,"month":8,"seconds":9,"time":1537515609000,"timezoneOffset":-480,"year":118}}],"count":11}';
            var final_result = JSON.parse(category);
            var cate_data = final_result.data;
            for (var i = 0; i < cate_data.length; i++) {
                var $tr = $('<tr></tr>');
                var $td = '<td><span data-id="' + cate_data[i].id + '">' + cate_data[i].name + '</span></td>';
                final_td += $td;
                if ((i + 1) % 3 === 0) {
                    $('#cate_data_table').append($tr.html(final_td));
                    final_td = "";
                }
            }
            //获取剩余的长度
            var leng = cate_data.length;
            var sup = leng % 3;
            var index = leng - sup;
            var final_td_sup = "";
            var $subtr = $('<tr></tr>');
            if (sup === 1) {
                //单个
                var $subtd = '<td><span data-id="' + cate_data[index]['id'] + '">' + cate_data[index]['name'] + '</span></td>';
                $('#cate_data_table').append($subtr.html($subtd));
            } else {
                //两个
                var $subtd = '<td><span data-id="' + cate_data[index]['id'] + '">' + cate_data[index]['name'] + '</span></td>';
                var $subtd2 = '<td><span data-id="' + cate_data[index + 1]['id'] + '">' + cate_data[index + 1]['name'] + '</span></td>';
                $('#cate_data_table').append($subtr.append($subtd).append($subtd2));
            }
            $('td').on('click', function () {
                $('td span').removeClass('this-choose');
                $(this).find('span').addClass('this-choose');
            });
            $('td').click(function () {
                // console.log(data-id)
                // var ID =  cate-data[index]['id']
                $('#cate').hide();
                $('#main_content').show();
                var $cid = $(this).find('span').attr('data-id');
                //分类选择之后的接口
                $.ajax({
                    url: url + 'api/selectSurpriseShopList',
                    type: 'get',
                    data: {
                        shopType: $cid
                    },
                    datatype: 'json',
                    success: function (fenlei_data) {
                        var fl = JSON.parse(fenlei_data);
                        var classify = fl.data;
                        for (var i = 0; i < classify.length; i++) {
                            var goods_item = $('<div class="goods-item jx"></div>'),
                                heard_row = $('<div class="layui-row"></div>'),
                                heard_div = $('<div class="layui-col-xs12"></div>'),

                                heard_img = $('<a href="/workspace/EnterTheStore.html?id=' + classify[i].id + '"><img src=" '+ classify[i].gatepic + '" height="100%" width="100%"/></a>');

                            var middle_div = $('<div class="layui-row  cj" data-api="' + classify[i]['id'] + '"></div>'),
                                middle_logo = $('<div class="layui-col-xs4"></div>');
                            var logo_1 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + classify[i].logopic + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                            var logo_ = "";
                            if (classify[i]['type'] == 0) {
                                //淘宝
                                logo_ = "img/31_155_bl.jpg";
                            } else if (classify[i]['type'] == 1) {
                                //微信
                                logo_ = "img/timg_1.jpg";
                            }
                            var logo_2 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + logo_ + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                            var middle_right = $('<div class="layui-col-xs8 zhongbu"></div>'),
                                middle_content = $('<div class="layui-container"></div>'),
                                pingjia = $('<div class="layui-row layui-col-space1"></div>'),
                                leiji_pingjia = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                                    '<div>累计评价</div><label class="num">' + classify[i].evaluatecount + '</label></div></div></div></div>'),
                                yuexiao = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                                    '<div>月销指数</div><label class="num">' + classify[i].salecount + '</label></div></div></div></div>'),
                                guang = $('<div class="layui-row"></div>'),

                                fensi = $('<div class="layui-col-xs5"><button class="layui-btn layui-btn-xs layui-btn-warm  btn3">粉丝<label>' + classify[i].likecount + '</label></button></div>'),
                                xihuan = $('<div class="layui-col-xs3 layui-col-xs-offset1"><button class="layui-btn layui-btn-xs layui-btn-danger btn2">我喜欢</button></div>'),
                                quguanguang = $('<div class="layui-col-xs3"><button class="layui-btn layui-btn-xs layui-btn-warm  btn1"><a href="/workspace/EnterTheStore.html?id=' + classify[i].id + '">去逛逛</a></button></div>');

                            var shishang_1 = $('<div class="layui-row"></div>'),
                                shishang = $('<div class="layui-col-xs12"><div class="text1">' + classify[i].introduce + '</div></div>');
                            shishang_1.append(shishang);
                            middle_logo.append(logo_1).append(logo_2);
                            middle_right.append(middle_content.append(pingjia.append(leiji_pingjia).append(yuexiao).append(guang.append(fensi).append(quguanguang).append(xihuan))));
                            middle_div.append(middle_logo).append(middle_right);
                            goods_item.append(heard_row.append(heard_div.append(heard_img))).append(middle_div).append(shishang_1);

                            $("#content_goods").append(goods_item);
                        }
                    }
                })
            })
        }
    });
    $('#search').click(function () {
        var val = document.getElementById("inp").value;
        // var val =  $('#inp').val();
        $.ajax({
            url: url + 'api/searchSurpriseShopList',
            type: 'get',
            data: {
                str: val
            },
            datatype: 'json',
            success: function (ss) {
                var sousuo = JSON.parse(ss);
                var search = sousuo.data;
                for (var i = 0; i < search.length; i++) {
                    var goods_item = $('<div class="goods-item jx"></div>'),
                        heard_row = $('<div class="layui-row"></div>'),
                        heard_div = $('<div class="layui-col-xs12"></div>'),
                        heard_img = $('<a href="/workspace/EnterTheStore.html?id=' + search[i].id + '"><img src=" ' + search[i].gatepic + ' " height="100%" width="100%"/></a>');

                    var middle_div = $('<div class="layui-row  cj" data-api="' + search[i]['id'] + '"></div>'),
                        middle_logo = $('<div class="layui-col-xs4"></div>');
                    var logo_1 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + search[i].logopic + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                    var logo_ = "";
                    if (search[i]['type'] == 0) {
                        //淘宝
                        logo_ = "img/31_155_bl.jpg";
                    } else if (search[i]['type'] == 1) {
                        //微信
                        logo_ = "img/timg_1.jpg";
                    }
                    var logo_2 = $('<div style="height: 50px;width: 100%;overflow: hidden;background-image: url(' + logo_ + ');background-position: center;background-repeat: no-repeat;background-size: contain;background-color: #fff"></div>');
                    var middle_right = $('<div class="layui-col-xs8 zhongbu"></div>'),
                        middle_content = $('<div class="layui-container"></div>'),
                        pingjia = $('<div class="layui-row layui-col-space1"></div>'),
                        leiji_pingjia = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                            '<div>累计评价</div><label class="num">' + search[i].evaluatecount + '</label></div></div></div></div>'),
                        yuexiao = $('<div class="layui-col-xs6"><div class="ljpj"><div class="layui-row"><div class="layui-col-xs12 ljpj_2">' +
                            '<div>月销指数</div><label class="num">' + search[i].salecount + '</label></div></div></div></div>'),
                        guang = $('<div class="layui-row"></div>'),

                        fensi = $('<div class="layui-col-xs5"><button class="layui-btn layui-btn-xs layui-btn-warm  btn3">粉丝<label>' + search[i].likecount + '</label></button></div>'),
                        xihuan = $('<div class="layui-col-xs3 layui-col-xs-offset1"><button class="layui-btn layui-btn-xs layui-btn-danger btn2">我喜欢</button></div>'),
                        quguanguang = $('<div class="layui-col-xs3"><button class="layui-btn layui-btn-xs layui-btn-warm  btn1"><a href="/workspace/EnterTheStore.html?id=' + search[i].id + '">去逛逛</a></button></div>');

                    var shishang_1 = $('<div class="layui-row"></div>'),
                        shishang = $('<div class="layui-col-xs12"><div class="text1">' + search[i].introduce + '</div></div>');
                    shishang_1.append(shishang);
                    middle_logo.append(logo_1).append(logo_2);
                    middle_right.append(middle_content.append(pingjia.append(leiji_pingjia).append(yuexiao).append(guang.append(fensi).append(quguanguang).append(xihuan))));
                    middle_div.append(middle_logo).append(middle_right);
                    goods_item.append(heard_row.append(heard_div.append(heard_img))).append(middle_div).append(shishang_1);

                    $("#content_goods").append(goods_item);
                }
            }
        })
    });
});